<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->
<ng-container *transloco="let t">
  <ng-container *ngIf="model$ | async as vm">
    <tg-title
      [title]="
        t('project_settings.members.page_title', {
          projectName: vm.project.name
        })
      "></tg-title>
    <section class="member-settings">
      <div class="header">
        <h3
          data-test="members-settings-title"
          mainFocus
          id="main-area-title"
          class="settings-title">
          {{ t('project_settings.members.title') }}
        </h3>

        <button
          (click)="openModal()"
          icon="plus"
          appearance="primary"
          tuiButton
          type="submit"
          data-test="settings-invite-btn">
          {{ t('project_settings.members.invite') }}
        </button>
      </div>
      <tui-tabs role="tablist">
        <a
          id="tab-1"
          role="tab"
          aria-controls="tabpanel-1"
          tabindex="-1"
          [attr.aria-selected]="selectedTab === 1"
          class="tab-link"
          tuiTab
          data-test="members-tab"
          [routerLink]="['./']"
          routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }"
          (click)="handleA11y(1)">
          <tui-svg
            class="tab-icon"
            src="members"></tui-svg>
          {{ t('common_members_tabs.members_tab') }}
          <span
            class="count"
            data-test="members-count"
            >({{ vm.totalMembers }})</span
          >
        </a>
        <a
          id="tab-2"
          role="tab"
          aria-controls="tabpanel-2"
          tabindex="-1"
          [attr.aria-selected]="selectedTab === 2"
          class="tab-link"
          tuiTab
          data-test="pendings-tab"
          [routerLink]="['./pending']"
          routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }"
          (click)="handleA11y(2)">
          <tui-svg
            class="tab-icon"
            src="clock"></tui-svg>
          {{ t('common_members_tabs.pending_tab') }}
          <span
            class="count"
            *ngIf="vm.totalPending"
            >({{ vm.totalPending }})</span
          >
        </a>
      </tui-tabs>
      <div
        #tabContent
        [attr.id]="'tabpanel-' + selectedTab"
        [attr.aria-labelledby]="'tab-' + selectedTab"
        class="content"
        role="tabpanel">
        <router-outlet></router-outlet>
      </div>
    </section>

    <tg-ui-modal
      [open]="invitePeopleModal"
      (requestClose)="closeModal()">
      <ng-container *ngIf="vm.project">
        <tg-invite-user-modal
          *ngIf="invitePeopleModal && vm.project.userIsAdmin"
          (inviteSuccess)="onInviteSuccess()"
          (closeModal)="closeModal()"
          [isProjectInvitation]="true"></tg-invite-user-modal>
      </ng-container>
    </tg-ui-modal>
  </ng-container>
</ng-container>
